<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>CSS Test: Basic functionality of the 'rotate' method on a 3D transform</title>
        <link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
        <link rel="help" href="http://www.w3.org/TR/css3-3d-transforms/#cssmatrix-interface" />
        <meta name="flags" content="dom" />
        <meta name="assert" content="The 'rotate' method of the CSSMatrix interface is supported for 3D matrices" />
        <style type="text/css">
            #result
            {
                background: red;
                height: 100px;
                width: 100px;
            }
        </style>
        <script type="text/javascript">
            function startTest()
            {
                var testDiv = document.getElementById("result");
                cssMatrixConstructor = "new CSSMatrix()";

                //Rounds the given number to three decimal places
                function round(number)
                {
                    var result = Math.round(number * 1000) / 1000;
                    return result;
                }

                var matrix = eval(cssMatrixConstructor);
                matrix.setMatrixValue("matrix3d(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16)");
                var resultMatrix = matrix.rotate(30,45,60);
                var isOriginalMatrixUnchanged = false;
                var isResultMatrixCorrect = false;

                //Verify the original matrix is unchanged after the rotate operation
                if ((1 == matrix.m11) &&
                (2 == matrix.m12) &&
                (3 == matrix.m13) &&
                (4 == matrix.m14) &&
                (5 == matrix.m21) &&
                (6 == matrix.m22) &&
                (7 == matrix.m23) &&
                (8 == matrix.m24) &&
                (9 == matrix.m31) &&
                (10 == matrix.m32) &&
                (11 == matrix.m33) &&
                (12 == matrix.m34) &&
                (13 == matrix.m41) &&
                (14 == matrix.m42) &&
                (15 == matrix.m43) &&
                (16 == matrix.m44))
                {
                    isOriginalMatrixUnchanged = true;
                }

                //Verify the resulting matrix is correct (within three decimal places)
                if (-2.949 == round(resultMatrix.m11) &&
                -2.690 == round(resultMatrix.m12) &&
                -2.431 == round(resultMatrix.m13) &&
                -2.172 == round(resultMatrix.m14) &&
                6.305 == round(resultMatrix.m21) &&
                6.824 == round(resultMatrix.m22) &&
                7.344 == round(resultMatrix.m23) &&
                7.863 == round(resultMatrix.m24) &&
                7.652 == round(resultMatrix.m31) &&
                9.284 == round(resultMatrix.m32) &&
                10.916 == round(resultMatrix.m33) &&
                12.548 == round(resultMatrix.m34) &&
                13 == round(resultMatrix.m41) &&
                14 == round(resultMatrix.m42) &&
                15 == round(resultMatrix.m43) &&
                16 == round(resultMatrix.m44))
                {
                    isResultMatrixCorrect = true;
                }

                if (isOriginalMatrixUnchanged && isResultMatrixCorrect)
                {
                    var testDiv = document.getElementById("result");
                    testDiv.style.background = "black";
                }
            }
        </script>
    </head>
    <body onload="startTest()">
        <p>Test passes if there is no red visible on the page.</p>
        <div id="result"></div>
    </body>
</html>
